<template>
  <!------ 分类自定义（批量添加分类） ------>
  <div class="edit-category">
    <div class="header">
      <div class="left">
        <p>分类自定义</p>
        <el-button class="back_btn" @click="handleBack">返回</el-button>
      </div>
    </div>

    <div class="body">
      <div class="crumbs">
        <div
          class="customize-item"
          v-for="(c, index) in crumbs"
          :key="c.id"
          @click="clickCrumbs(c, index)"
        >
          <!-- 模块名字 -->
          <span>{{ c.plantTypeName }}</span>
          <!-- 箭头 -->
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <div class="category-table">
        <el-table :data="tableData" :show-header="false">
          <!-- 模块名称 -->
          <el-table-column align="left" prop="plantTypeName">
            <template #default="scope">
              <el-input
                v-model="scope.row.plantTypeName"
                placeholder="分类"
              ></el-input>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column align="center" label="操作" width="280px">
            <template #default="scope">
              <div class="btns">
                <span @click="handleDeleteBtn(scope)">
                  <el-icon size="16px" color="#F8A850"><Delete /></el-icon>
                  删除
                </span>

                <span @click="handleCopyData(scope)">
                  <el-icon size="16px" color="#5974FF"><Plus /></el-icon>
                  复制
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 底部 按钮部分 -->
    <footer>
      <el-button class="back_btn" @click="handleBack">取消</el-button>

      <el-button type="primary" class="save_btn" @click="handleSave"
        >保存</el-button
      >
    </footer>
  </div>
</template>

<script setup>
// 后端接口
import { addPlanClassTree, DeletePlanClassTree } from "@/api/plans";
import { ElMessage } from "element-plus";

import { ref, watch } from "vue";

const emits = defineEmits([
  "getMajorCategoryTree",
  "sideTreeEdit",
  "clickCategory",
]);
const props = defineProps({
  // 面包屑数据
  crumbs: {
    type: Array,
    required: true,
  },
  // 分类原始数据
  categoryList: {
    type: Array,
    required: true,
    default: () => [],
  },

});

// 表格数据
const tableData = ref([]);

/** 监听 */
watch(
  () => props.categoryList,
  () => {

    // 赋值默认三个空对象
    tableData.value = [
      ...JSON.parse(JSON.stringify(props.categoryList)),
      {},
      {},
      {},
    ];
  },
  { immediate: true }
);

/** 点击面包屑 **/
const clickCrumbs = (c, index) => {
  console.log(c);

  // 点击所有分类需要做一些处理 -- 高亮
  emits(
    "clickCategory",
    c.id == 0 ? null : c,
    props.crumbs.slice(1, index + 1)
  );
};

/** 复制表格数据 */
const handleCopyData = ({ row, $index }) => {
  const { plantTypeName } = row;
  tableData.value.splice($index + 1, 0, { plantTypeName });
};

/** 删除表格数据 */
const handleDeleteBtn = async ({ row, $index }) => {
  try {
    if (row.id) {
      // 真实数据走接口
      await DeletePlanClassTree({ plantType: row.id });

      ElMessage({ type: "success", message: "删除成功" });
      emits("getMajorCategoryTree");
    }

    // 删除表格数据
    tableData.value.splice($index, 1);
  } catch (error) {
    console.log(error);
  }
};

/** 保存 */
const handleSave = async () => {
  try {

    await addPlanClassTree(
      tableData.value
        .filter((item) => item?.plantTypeName?.trim())
        .map((item) => {
          item.topId = props.crumbs.at(-1).id || null;
          return item;
        })
    );

    ElMessage({ type: "success", message: "保存成功" });
    emits("getMajorCategoryTree","update");
  } catch (error) {
    console.log(error);
  }
};

/** 返回 */
const handleBack = () => {
  emits("sideTreeEdit", false);
};
</script>

<style lang="scss" scoped>
.edit-category {
  width: 100%;
  min-width: 300px;
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
  padding-bottom: 20px;
  min-height: 780px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 78px;
    padding: 0 32px;
    color: #696969;
    font-size: 18px;
    border-bottom: 1px solid #ccc;

    .left {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;

      p {
        color: #343957;
        font-size: 22px;
      }

      button {
        font-size: 14px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        color: #5974ff;

        &:hover {
          background: none;
          opacity: 0.8;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;

      .upload {
        width: 60px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 5px;
        border: 1px solid #c5ddff;
      }

      span {
        color: #64a15e;
        font-size: 14px;
        cursor: pointer;
        margin: 0 20px;
      }
    }
  }

  .body {
    display: flex;
    align-items: center;
    padding-left: 86px;
    padding-top: 8%;
    .crumbs {
      display: flex;
      flex-wrap: wrap;

      .customize-item {
        // min-width: 100px;
        span {
          color: #696969;
          cursor: pointer;
          line-height: 1.5;

          &:hover {
            color: #696969c0;
          }
        }

        i {
          display: inline-block;
          color: #9c9c9c;
          margin: 0 6px;
          vertical-align: text-top;
        }
      }
    }
  }

  .category-table {
    padding: 30px;
    overflow-x: hidden;
    width: 700px;
    min-width: 180px;

    .btns {
      display: flex;
      cursor: pointer;
      align-content: center;
      justify-content: center;

      span {
        color: #363636;
        &:hover {
          opacity: 0.8;
        }

        & + span {
          margin-left: 60px;
        }
      }

      i {
        vertical-align: text-top;
      }
    }
  }
  footer {
    padding-left: 86px;
    margin-top: 20px;

    button {
      width: 108px;
      height: 40px;
      font-size: 14px;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #5974ff;
      color: #5974ff;

      &:hover {
        opacity: 0.8;
      }

      &.back_btn {
        background: none;
      }

      &.save_btn {
        background: #5974ff;
        color: #fff;
      }
    }
  }
}

::v-deep(.el-table) {
  border: 1px solid #c2c2c2;
  overflow: hidden;
  border-radius: 10px;

  &::before {
    display: none;
  }

  tr {
    background: #f5f5f5 !important;
  }

  /** 表格内的输入框 */
  .el-input__wrapper {
    box-shadow: none;
    background-color: transparent;
    .el-input__inner {
      text-align: center;
    }
  }

  /** 划过表格 的颜色 */
  .el-table__body tr:hover > td.el-table__cell {
    background-color: #f5f5f5 !important;
  }

  td.el-table__cell {
    border: 1px solid #c2c2c2;
    border-left: 0;
    border-top: 0;

    &:last-child {
      border-right: 0;
    }
  }
}
</style>
